<script lang="ts" setup></script>

<template>
	<!-- 展示卡片 -->
	<view
		:style="{
			padding: mpWxPos.logoLeft + 'px'
		}">
		<view
			class="header-card flex h-80px b-1px border-solid border-[#EDEDED] rounded-8px"
			v-if="mpUser.id > 0">
			<view class="avatar w-60px p-10px">
				<u-image :src="mpUser.avatar" mode="aspectFit" width="60" height="60"></u-image>
			</view>
			<view class="user-info m-10px w-full">
				<view class="nickname-setting color-blue h-30px leading-30px">
					<view class="nickname">{{ mpUser.nickname }}</view>
				</view>
				<view class="mobile-id h-30px leading-30px flex justify-between">
					<view class="mobile">
						<view class="mobile-show" v-if="mpUser.mobile">
							{{ mpUser.mobile }}
						</view>
						<view
							class="mobile-show color-gray text-sm flex items-center h-full"
							v-else>
							<text class="leading-30px">手机号未绑定</text>
						</view>
					</view>
					<view class="uid">ID: {{ mpUser.showId }}</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-list mt-10px">
			<u-cell-group>
				<u-cell title="设置" isLink @click="setting"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script lang="ts">
import { MpUser } from '@/types'
export default {
	name: 'user_center_Index',
	data() {
		return {}
	},
	computed: {
		mpWxPos() {
			return this.$store.getters['mpWxPos/getMpWxPos']
		},
		mpUser() {
			return this.$store.getters['jwt/getMpUser']
		}
	},
	mounted() {
		this.getMpUserInfo()
	},
	methods: {
		getMpUserInfo() {
			this.$api.xcxPost('/user/center/index').then((res) => {
				this.$store.commit('jwt/updateMpUser', res.data.mpUser)
			})
		},
		setting() {
			uni.navigateTo({
				url: '/pages/user/center/Setting'
			})
		}
	}
}
</script>

<style lang="scss" scoped></style>
